import "./Load.scss";

const Load = memo(
  ({
    percent,
    name,
    startAnimat = false,
  }: {
    percent: number;
    name: string;
    startAnimat?: boolean;
  }) => {
    const [start, setStart] = useState(false);

    useEffect(() => {
      setTimeout(() => {
        setStart(startAnimat);
      }, 500);
    }, [startAnimat]);

    return (
      <div
        className="load-com"
        // @ts-ignore
        style={{ "--width": start ? percent + 1 + "%" : "0%" }}
      >
        <p>{name}</p>
        <div className="load"></div>
        <p className="precent">{percent}%</p>
      </div>
    );
  }
);

export default Load;
